// 文字水平对齐方式 ********************************************
@each $var in (left, center, right) {
    .text-#{$var} {
      text-align: $var;
    }
  }
  
  // ********************************************
  .overflow-x-scroll {
    overflow-x: scroll; // 水平方向超出滚动
  }
  .overflow-y-scroll {
    overflow-y: scroll; // 垂直方向超出滚动
  }
  .overflow-y-auto {
    overflow-y: auto; // 垂直方向高度超出后才显示滚动条
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  
  // 字体 ********************************************
  .font-bold {
    font-weight: bold;
  }
  
  // 边框颜色 ********************************************
  // 类名  .border-b
  // $orientation: (
  //   t: top,
  //   b: bottom,
  //   l: left,
  //   r: right,
  // );
  // @each $orientationKey, $orientationVal in $orientation {
  //   .border-#{$orientationKey} {
  //     border-#{$orientationVal}: 1px solid #e4e4ee;
  //   }
  // }
  
  // *******************************************************
  // 外边框圆角
  @for $i from 1 through 10 {
    // 如果能够被 2 整除，将应用以下样式
    @if ($i % 2 == 0) {
      // b-rd-6
      .b-rd-#{$i} {
        border-radius: #{$i}px;
      }
    }
  }
  
  .w-full {
    width: 100%;
  }
  .h-full {
    height: 100%;
  }
  
  // 宽高
  // @for $i from 0 through 500 {
  //   @each $key, $val in w width, h height, lh line-height {
  //     // 如果能够被 10 整除，将应用以下样式
  //     @if ($i % 10 == 0) {
  //       // w-20 || lh-100
  //       .#{$key}-#{$i} {
  //         #{$val}: 1px * $i;
  //       }
  //     }
  //   }
  // }
  
  .position-relative {
    position: relative; // 父：相
  }
  .position-absolute {
    position: absolute; // 子：绝
  }
  
  // 元素显示模式 eg: display-inline-block
  @each $val in block, inline, inline-block {
    .display-#{$val} {
      display: #{$val};
    }
  }